<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>leonard personal page</title>
  <!-- web fonts -->
  <link href="//fonts.googleapis.com/css?family=Nunito:400,600,700,800,900&display=swap" rel="stylesheet">
  <link href="//fonts.googleapis.com/css?family=Hind&display=swap" rel="stylesheet">
  <!-- //web fonts -->
  <!-- Template CSS -->
  <link rel="stylesheet" href="assets/css/style-starter.css">
</head>

<body>

  <section class="w3l-bootstrap-header">
    <nav class="navbar navbar-expand-lg navbar-light py-lg-3 py-2">
      <div class="container">
        <!-- <a class="navbar-brand" href="index.html"> Leonard Website</a> -->
        <a class="navbar-brand" href="#index.html">
          <img src="./assets/images/bsin.png" alt="Your logo" title="Your logo" style="height:35px;" />
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon fa fa-bars"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="www.boleixiongdi.com">Blog</a>
            </li>
          </ul>
          <div class="card-widget card-webinfo">
            <div class="card-content">
              <div class="item-headline">
                <i class="fa fa-line-chart" aria-hidden="true"></i>
                <span>站点信息</span>
              </div>
              <div class="webinfo">
                <div class="webinfo-item">
                  <div class="webinfo-site-uv-name">本站访客数 :</div>
                  <div class="webinfo-site-uv-count" id="busuanzi_value_site_uv"></div>
                </div>
                <div class="webinfo-item">
                  <div class="webinfo-site-name">本站总访问量 :</div>
                  <div class="webinfo-site-pv-count" id="busuanzi_value_site_pv"></div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </nav>
  </section>
  <!--  Main banner section -->
  <section class="w3l-main-banner" id="home">
    <div class="companies20-content">
      <div class="companies-wrapper">
        <div class="item">

          <div class="slider-info banner-view text-center">
            <div class="banner-info container">
              <img src="assets/images/leonard.png" alt="about image" class="img-fluid">
              <h3 class="banner-text mt-5">Nice to meet you, I’m Leonard Lei
              </h3>
              <p class="my-4 mb-5">Engineer</p><br>

            </div>
          </div>


        </div>
      </div>
    </div>
  </section>

  <section class="w3l-about">

    <div class="skills-bars py-5">
      <div class="container py-md-3">
        <h2 class="item-headline">
          <i class="fa fa-bullhorn" aria-hidden="true"></i>
          <span>一言</span>
        </h2>
        <h4 id="hitokoto"></h4>
      </div>
    </div>

    <div class="skills-bars py-5">
      <div class="container py-md-3">
        <h2 class="item-headline">
          <i class="fa fa-calendar" aria-hidden="true"></i>
          <span>今日诗词</span>
        </h2>
        <div id="jinrishici-sentence"></div>
      </div>
    </div>

  </section>
  <!--  //Main banner section -->
  <section class="w3l-about ">
    <div class="skills-bars py-5">
      <div class="container py-md-3">

        <h2>音乐</h2>
        <meting-js auto="https://y.qq.com/n/yqq/playlist/7713574197.html">
        </meting-js>
        <hr>

        <div class="heading text-center mx-auto">
          <h3 class="head">I am a Full Stack Developer.</h3>
          <p class="my-3 head"> </p>
        </div>

        <div class="row mt-5 pt-3">
          <div class="col-lg-4 col-md-4 col-sm-6 skills-bar-grids mb-4 pb-2">
            <h4>前端：javascript、html、css(react框架)--博羸兄弟博客网站</h4>
            <div class="progress">
              <div class="progress-bar progress-bar-striped bg-color" role="progressbar" style="width: 50% ;height:4px;"
                aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-6 skills-bar-grids ">
            <h4>后台应用：java、golang--(golang博客后台、bsin-paas博客后台)</h4>
            <div class="progress">
              <div class="progress-bar progress-bar-striped bg-color" role="progressbar" style="width: 40% ;height:4px;"
                aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-6 skills-bar-grids mb-4 pb-2">
            <h4>嵌入式硬件：电路设计、pcbLayOut--agv控制板、双路bldc驱动器、智能充电桩控制板.....太多太多小东西</h4>
            <div class="progress">
              <div class="progress-bar progress-bar-striped bg-color" role="progressbar" style="width: 80% ;height:4px;"
                aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-6 skills-bar-grids ">
            <h4>嵌入式软件设计：主要方向，c/c++为主，arm/x86 Linux开发，主攻移动机器人定位融合、导航控制方向</h4>
            <div class="progress">
              <div class="progress-bar progress-bar-striped bg-color" role="progressbar" style="width: 95% ;height:4px;"
                aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
              </div>
            </div>
          </div>
          <div class="col-lg-4  col-md-4 col-sm-6 skills-bar-grids mb-4 pb-2">
            <h4>GUI设计：c++QT、PyQT、c#、vb--简单的一些上位机监控软件界面</h4>
            <div class="progress">
              <div class="progress-bar progress-bar-striped bg-color" role="progressbar" style="width: 60% ;height:4px;"
                aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
              </div>
            </div>
          </div>
          <div class="col-lg-4  col-md-4 col-sm-6 skills-bar-grids mb-4 pb-2">
            <h4>区块链：sodility、web3.js，智能合约设计编写--</h4>
            <div class="progress">
              <div class="progress-bar progress-bar-striped bg-color" role="progressbar" style="width: 70% ;height:4px;"
                aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-6 skills-bar-grids ">
            <h4>硬件设计，pcb LayOut</h4>
            <div class="progress">
              <div class="progress-bar progress-bar-striped bg-color" role="progressbar" style="width: 80% ;height:4px;"
                aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>
  <section class="w3l-feature-3" id="features">
    <div class="grid top-bottom">
      <div class="container">
        <div class="heading text-center mx-auto">
          <h3 class="head text-white">简单的快乐着</h3>
          <p class="my-3 head text-white"> 生活很单调，宁愿错误的乐观，也不要正确的悲观.</p>
        </div>
        <div class="middle-section grid-column text-center mt-5 pt-3">
          <div class="three-grids-columns">
            <span class="fa fa-paint-brush"></span>
            <h4>设计</h4>
            <p>忙碌能忘却伤痛</p>

          </div>
          <div class="three-grids-columns">
            <span class="fa fa-ils"></span>
            <h4>待发现</h4>
            <p></p>

          </div>
          <div class="three-grids-columns">
            <span class="fa fa-camera"></span>
            <h4>打篮球</h4>
            <p>运动使我快乐</p>

          </div>
        </div>
      </div>
    </div>
  </section>
  <div class="products-4" id="portfolio">
    <!-- Products4 block -->
    <div id="products4-block" class="text-center">
      <div class="container">
        <div class="heading text-center mx-auto mb-5">
          <h3 class="head">I Love What I Do</h3>
          <p class="my-3 head"> 强烈的求知欲需要自己不断学习.</p>
        </div>
        <input id="tab1" type="radio" name="tabs" checked>
        <label class="tabtle" for="tab1">嵌入式硬件</label>

        <input id="tab2" type="radio" name="tabs">
        <label class="tabtle" for="tab2">嵌入式软件</label>

        <input id="tab3" type="radio" name="tabs">
        <label class="tabtle" for="tab3">后台服务应用</label>

        <input id="tab4" type="radio" name="tabs">
        <label class="tabtle" for="tab4">前端开发</label>

        <section id="content1" class="tab-content text-left">
          <div class="d-grid grid-col-3">
            <div class="product">
              <a href="assets/images/g1.jpg" data-lightbox="example-set"
                data-title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam architecto, ex veritatis">
                <figure>
                  <img src="assets/images/g1.jpg" class="img-responsive" alt="" />
                </figure>
              </a>

            </div>
            <div class="product">
              <a href="assets/images/g2.jpg" data-lightbox="example-set"
                data-title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam architecto, ex veritatis">
                <figure>
                  <img src="assets/images/g2.jpg" class="img-responsive" alt="" />
                </figure>
              </a>

            </div>
            <div class="product">
              <a href="assets/images/g3.jpg" data-lightbox="example-set"
                data-title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam architecto, ex veritatis">
                <figure>
                  <img src="assets/images/g3.jpg" class="img-responsive" alt="" />
                </figure>
              </a>

            </div>
            <div class="product">
              <a href="assets/images/g4.jpg" data-lightbox="example-set"
                data-title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam architecto, ex veritatis">
                <figure>
                  <img src="assets/images/g4.jpg" class="img-responsive" alt="" />
                </figure>
              </a>

            </div>
            <div class="product">
              <a href="assets/images/g5.jpg" data-lightbox="example-set"
                data-title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam architecto, ex veritatis">
                <figure>
                  <img src="assets/images/g5.jpg" class="img-responsive" alt="" />
                </figure>
              </a>

            </div>
            <div class="product">
              <a href="assets/images/g6.jpg" data-lightbox="example-set"
                data-title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam architecto, ex veritatis">
                <figure>
                  <img src="assets/images/g6.jpg" class="img-responsive" alt="" />
                </figure>
              </a>

            </div>

          </div>
        </section>

        <section id="content2" class="tab-content text-left">
          <div class="d-grid grid-col-3">

            <div class="product">
              <a href="assets/images/g1.jpg" data-lightbox="example-set"
                data-title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam architecto, ex veritatis">
                <figure>
                  <img src="assets/images/g1.jpg" class="img-responsive" alt="" />
                </figure>
              </a>

            </div>
            <div class="product">
              <a href="assets/images/g2.jpg" data-lightbox="example-set"
                data-title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam architecto, ex veritatis">
                <figure>
                  <img src="assets/images/g2.jpg" class="img-responsive" alt="" />
                </figure>
              </a>

            </div>
            <div class="product">
              <a href="assets/images/g3.jpg" data-lightbox="example-set"
                data-title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam architecto, ex veritatis">
                <figure>
                  <img src="assets/images/g3.jpg" class="img-responsive" alt="" />
                </figure>
              </a>

            </div>
            <div class="product">
              <a href="assets/images/g4.jpg" data-lightbox="example-set"
                data-title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam architecto, ex veritatis">
                <figure>
                  <img src="assets/images/g4.jpg" class="img-responsive" alt="" />
                </figure>
              </a>

            </div>
          </div>
        </section>

        <section id="content3" class="tab-content text-left">
          <div class="d-grid grid-col-3">

            <div class="product">
              <a href="assets/images/g6.jpg" data-lightbox="example-set"
                data-title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam architecto, ex veritatis">
                <figure>
                  <img src="assets/images/g6.jpg" class="img-responsive" alt="" />
                </figure>
              </a>

            </div>
            <div class="product">
              <a href="assets/images/g7.jpg" data-lightbox="example-set"
                data-title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam architecto, ex veritatis">
                <figure>
                  <img src="assets/images/g7.jpg" class="img-responsive" alt="" />
                </figure>
              </a>
            </div>
          </div>
        </section>

        <section id="content4" class="tab-content text-left">
          <div class="d-grid grid-col-3">
            <div class="product">
              <a href="assets/images/g1.jpg" data-lightbox="example-set"
                data-title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam architecto, ex veritatis">
                <figure>
                  <img src="assets/images/g1.jpg" class="img-responsive" alt="" />
                </figure>
              </a>
            </div>
          </div>
        </section>
      </div>
    </div>
    <!-- Products4 block -->
  </div>
  <script src="assets/js/jquery-3.3.1.min.js"></script>
  <script src="assets/js/lightbox-plus-jquery.min.js"></script>
  <section class="services-12" id="experience">
    <div class="form-12-content">
      <div class="container">
        <div class="grid grid-column-2 ">

          <div class="column1">
            <h3 class="mb-5">Experiences</h3>
            <div class="experience-top">
              <h5>2021.6 - now</h5>
              <h4>honeywell </h4>
              <h4>Advanced Embedded Engr </h4>
              <p class="my-3 text-white">1.Motion control algorithm 2.shuttle localization fuse</p>
            </div>
            <div class="experience-top">
              <h5>2019.6 - 2021.6</h5>
              <h4>浙江科钛机器人股份有限公司</h4>
              <h4>嵌入式工程师</h4>
              <p class="my-3 text-white">.</p>
            </div>
            <div class="experience-top">
              <h5>2018.11 - 2019.5</h5>
              <h4>深圳市汇川技术有限公司</h4>
              <h4>嵌入式工软件程师</h4>
              <p class="my-3 text-white">.</p>
            </div>
            <div class="experience-top">
              <h5>2018.2 - 2018.11</h5>
              <h4>深圳市三维通机器人系统有限公司</h4>
              <h4>嵌入式工程师</h4>
              <p class="my-3 text-white">.</p>
            </div>
            <div class="experience-top">
              <h5>2015.6 - 2018.1</h5>
              <h4>深圳市宏钺智能机器人有限公司</h4>
              <h4>电气主管</h4>
              <p class="my-3 text-white">.</p>
            </div>
          </div>
          <div class="column2">
            <h3 class="mb-5">Education</h3>
            <div class="experience-top">
              <h5>2022-</h5>
              <h4>xxxxx</h4>
              <p class="my-3 text-white">待考取.</p>
            </div>
            <div class="experience-top">
              <h5>2011-2015</h5>
              <h4>桂林电子科技大学学士</h4>
              <p class="my-3 text-white">电气工程及其自动化</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="w3l-testimonials" id="testimonials">
    <div class="customers-6-content py-5">
      <div class="container py-lg-3">
        <div class="heading text-center mx-auto">
          <h3 class="head">听大佬的话</h3>
          <p class="my-3 head "> 快来听听大佬是如何评价自己和对自己的劝导的.</p>
        </div>

        <div id="customerhnyCarousel" class="carousel slide" data-ride="carousel">

          <ol class="carousel-indicators">
            <li data-target="#customerhnyCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#customerhnyCarousel" data-slide-to="1"></li>

          </ol>
          <!-- Carousel items -->
          <div class="carousel-inner pb-5">

            <div class="carousel-item active">
              <div class="customer row py-5 mt-3">
                <div class="col-lg-4 col-md-6">
                  <div class="card">

                    <div class="card-body">
                      <img class="card-img-top img-responsive" src="assets/images/mayun.jpeg" alt="">
                      <h3 class="card-title mt-2">马云</h3>
                      <p class="sub-title mb-3">风清扬</p>
                      <p class="card-text"> "关关难过关关过，前路漫漫亦灿灿！"
                      </p>


                    </div>
                  </div>
                </div>
                <div class="col-lg-4 col-md-6 off-testi-2">
                  <div class="card">

                    <div class="card-body">
                      <img class="card-img-top img-responsive" src="assets/images/leijun.png" alt="">
                      <h3 class="card-title mt-2">雷军</h3>
                      <p class="sub-title mb-3">小米集团董事长</p>
                      <p class="card-text"> "Are you ok？ you must be ok"
                      </p>


                    </div>
                  </div>
                </div>
                <div class="col-lg-4 offset-md-3 offset-lg-0 col-md-6 off-testi">
                  <div class="card">
                    <div class="card-body">
                      <img class="card-img-top img-responsive" src="assets/images/wangjianlin.png" alt="">
                      <h3 class="card-title mt-2">王健林</h3>
                      <p class="sub-title mb-3">原中国首负</p>
                      <p class="card-text"> "一个亿的目标是最基本的"
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--.item-->

            <div class="carousel-item">
              <div class="customer row py-5 mt-3">
                <div class="col-lg-4 col-md-6">
                  <div class="card">
                    <div class="card-body">
                      <img class="card-img-top img-responsive" src="assets/images/musk.png" alt="">
                      <h3 class="card-title mt-2">Elon Reeve Musk</h3>
                      <p class="sub-title mb-3">世界首富</p>
                      <p class="card-text"> "你宁愿错误的乐观，也不要正确的悲观,加油！！！"
                      </p>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4 col-md-6">
                  <div class="card">
                    <div class="card-body">
                      <img class="card-img-top img-responsive" src="assets/images/liyanhong.png" alt="">
                      <h3 class="card-title mt-2">李彦宏</h3>
                      <p class="sub-title mb-3">百度CEO</p>
                      <p class="card-text"> "What's your problem？快来加入Apollo吧！"
                      </p>
                    </div>
                  </div>
                </div>


                <div class="col-lg-4 col-md-6">
                  <div class="card">
                    <div class="card-body">
                      <img class="card-img-top img-responsive" src="assets/images/mahuateng.png" alt="">
                      <h3 class="card-title mt-2">马化腾</h3>
                      <p class="sub-title mb-3">腾讯创始人</p>
                      <p class="card-text"> "低调行事，凡事三思而后行！！！"
                      </p>
                    </div>
                  </div>
                </div>

              </div>

            </div>


          </div>
          <!--.carousel-inner-->
        </div>
      </div>
    </div>
    <!--//customers -->
  </section>

  <!-- grids block 5 -->
  <section class="w3l-footer-29-main" id="footer">
    <div class="footer-29 text-center">
      <div class="container">

        <div class="main-social-footer-29">

          <a href="http://www.boleixiongdi.com" class="博羸兄弟"><span class="fa fa-facebook"></span>博羸兄弟</a>
          <a href="http://www.huoyuanshequ.com" class="火源社区"><span class="fa fa-twitter"></span>火源社区</a>
          <a href="http://www.flyray.me" class="bsin-paas"><span class="fa fa-instagram"></span>bsin-paas</a>
        </div>
        <div class="bottom-copies text-center">
          <p class="copy-footer-29">© 2022 My Leonard Person1 Page, All rights reserved | Designed by boleixiongdi</p>

        </div>
      </div>
    </div>
    <!-- move top -->
    <button onclick="topFunction()" id="movetop" title="Go to top">
      <span class="fa fa-angle-up"></span>
    </button>
    <script>
      // When the user scrolls down 20px from the top of the document, show the button
      window.onscroll = function () {
        scrollFunction()
      };

      function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
          document.getElementById("movetop").style.display = "block";
        } else {
          document.getElementById("movetop").style.display = "none";
        }
      }

      // When the user clicks on the button, scroll to the top of the document
      function topFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
      }
    </script>
    <!-- /move top -->
  </section>
  <!-- // grids block 5 -->
  <script src="assets/js/jquery-3.3.1.min.js"></script>
  <!-- //footer-28 block -->
  </section>

  <script>
    $(function () {
      $('.navbar-toggler').click(function () {
        $('body').toggleClass('noscroll');
      })
    });
  </script>
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
    </script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
    </script>

  <!-- Smooth scrolling -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery.fancybox@2.1.5/source/jquery.fancybox.js"></script>
  <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/instant.page@3.0.0/instantpage.js" type="module"></script>
  <script src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.0/lazysizes.min.js" async></script>
  <!-- aplayer、meting -->
  <!-- require APlayer -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
  <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
  <!-- require MetingJS -->
  <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

  <!-- nplayer -->
  <script src="https://unpkg.com/nplayer@latest/dist/index.min.js"></script>

  <!--   一言、今日诗词   -->
  <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
  <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>

  <!-- 看板娘 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
  <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

  <!--鼠标点击效果-->
  <script src="https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@3.0.8/js/maodian.js"></script>

  <!-- 滚动条 -->
  <script src="~/Scripts/jquery-1.8.2.min.js"></script>

  <script type="text/javascript">
    console.clear();
    console.log("%c 有朋自远方来, 不亦说乎.", "background:#24272A; color:#ffffff", "");
    console.log("%c Github %c", "background:#24272A; color:#ffffff", "", "https://github.com/laoxuai");
    console.log("%c 版本号: %c", "background:#24272A; color:#ffffff", "", "1.0.0");


    (function ($) {
      $.fn.snow = function (options) {
        var $flake = $('<div id="snowbox" />').css({ 'position': 'absolute', 'z-index': '9999', 'top': '-50px' }).html('&#10052;'),
          documentHeight = $(document).height(),
          documentWidth = $(document).width(),
          defaults = {
            minSize: 10,
            maxSize: 20,
            newOn: 1000,
            flakeColor: "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
          },
          options = $.extend({}, defaults, options);
        var interval = setInterval(function () {
          var startPositionLeft = Math.random() * documentWidth - 100,
            startOpacity = 0.5 + Math.random(),
            sizeFlake = options.minSize + Math.random() * options.maxSize,
            endPositionTop = documentHeight - 200,
            endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
            durationFall = documentHeight * 10 + Math.random() * 5000;
          $flake.clone().appendTo('body').css({
            left: startPositionLeft,
            opacity: startOpacity,
            'font-size': sizeFlake,
            color: options.flakeColor
          }).animate({
            top: endPositionTop,
            left: endPositionLeft,
            opacity: 0.2
          }, durationFall, 'linear', function () {
            $(this).remove()
          });
        }, options.newOn);
      };
    })(jQuery);
    $(function () {
      $.fn.snow({
        minSize: 5, /* 定义雪花最小尺寸 */
        maxSize: 50,/* 定义雪花最大尺寸 */
        newOn: 800  /* 定义密集程度，数字越小越密集 */
      });
    });

    // 浏览器搞笑标题
    var OriginTitle = document.title;
    var titleTime;
    document.addEventListener('visibilitychange', function () {
      if (document.hidden) {
        // $('[rel="icon"]').attr('href', "/funny.ico");
        document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
        clearTimeout(titleTime);
      }
      else {
        $('[rel="icon"]').attr('href', "/favicon.ico");
        document.title = '(ฅ>ω<*ฅ) 噫又好啦 ~' + OriginTitle;
        titleTime = setTimeout(function () {
          document.title = OriginTitle;
        }, 2000);
      }
    });

    window.onload = function () {
      // 利用 data-scroll 属性，滚动到任意 dom 元素
      $.scrollto = function (scrolldom, scrolltime) {
        $(scrolldom).click(function () {
          var scrolltodom = $(this).attr("data-scroll");
          $(this).addClass("active").siblings().removeClass("active");
          $('html, body').animate({
            scrollTop: $(scrolltodom).offset().top
          }, scrolltime);
          return false;
        });
      };
      //判断位置控制 返回顶部的显隐
      if ($(window).width() > 800) {//如果窗体的宽度大于800
        var backTo = $("#back-to-top");//获取back-to-top对象
        var backHeight = $(window).height() - 980 + 'px';//让window高度减980
        $(window).scroll(function () {
          if ($(window).scrollTop() > 700 && backTo.css('top') === '-900px') {
            backTo.css('top', backHeight);
          }
          else if ($(window).scrollTop() <= 700 && backTo.css('top') !== '-900px') {
            backTo.css('top', '-900px');
          }
        });

      }
      //启用
      $.scrollto("#back-to-top", 800);

    }

  </script>

</body>

</html>
<!-- // grids block 5 -->